<!DOCTYPE html>
<html>
<!--

Copyright (c) 2013 Mapo developers and contributors <mapo.tizen@gmail.com>

This file is part of Mapo.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

-->

<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A geolocation application" />

<title>Mapo</title>

<link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css" />
<link rel="stylesheet" href="css/jqm-docs.css" />
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jqm-docs.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript">
<!--
	var OpenLayers = null;
	var google = null;
	var gmaps = null;
//-->
</script>

<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" href="css/style.css" />
</head>

<body>

	<!-- Page 1 : My position -->
	<div data-role="page" id="position" class="ui-page">
		<div data-role="header" data-id="myHeader" data-position="fixed">
			<!-- <input type="button" onclick="getLocation()" value="Position"/> -->
			<a href="javascript:void(0);" data-role="button"
				onclick="getLocation()" id="home" class="ui-btn-left"
				data-mini="true" data-icon="home">Update</a>
			<h1 class="ui-title">MAPO</h1>
			<a data-role="button" id="exit" class="ui-btn-right-mini"
				data-icon="delete" onclick="quit()">Exit</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#position" class="ui-btn-active ui-state-persist">Position</a></li>
					<li><a href="#map">Map</a></li>
					<li><a href="#settings">Settings</a></li>
					<li><a href="#about">About</a></li>
				</ul>
			</div>
			<!-- /navbar -->
		</div>
		<!-- /header -->

		<div data-role="content">
			<form>

				<p id="locationInfo">Last saved position, <br/>
press "Update" to refresh position</p>
<center>
				<table>
					<tr>
						<td><label for=lat>Latitude (N+/S-):
						</label></td>
						<td><input type="text" id="lat" value="52.165"
							onChange="changeLat(lat.value);" /></td>
					</tr>
					<tr>
						<td><label for=lon>Longitude (W+/E-):
						</label></td>
						<td><input type="text" id="lon" value="-2.21"
							onChange="changeLon();" /></td>
					</tr>
				</table>
				</center>
				<label for="dms">DMS (degree, minutes, seconds):</label> <input
					type="text" id="dms" value="" onChange="changeDMS();" />

			</form>


			<div data-role="collapsible" data-collapsed="true">
				<h3>Share:</h3>
				<div data-role="controlgroup">
					<button id="email_button" onclick="sendEmail()">Email</button>
					<button id="message_button" onclick="sendMessage()">Message</button>
					<button id="calendar_button" onclick="createCalendarEvent()">Calendar</button>
					<button id="contact_button" onclick="createContact()">Contact</button>
					<button onclick="goToURL('twitter')">Twitter (post)</button>
					<!-- 
					<button id="call_button" onclick="call()" style="display: none;">Call</button>
					<button id="bluetooth_button" onclick="sendBluetooth()" style="display: none;">Bluetooth</button>
					 -->
				</div>
			</div>

			<div data-role="collapsible" data-collapsed="true">
				<h3>Web:</h3>
				<div data-role="controlgroup">
					<button onclick="goToURL('OSM')">OpenStreetMap</button>
					<button onclick="goToURL('GM')">Google Maps</button>
					<button onclick="goToURL('http://maps.nokia.com/${lat},${lon},16,0,0,normal.day')">HERE Maps</button>
					<button onclick="goToURL('https://wigle.net/map?maplat=${lat}&maplon=${lon}&mapzoom=12&startTransID=20010000-00000&endTransID=20170000-00000')">Wigle (WiFi)</button>
					<button onclick="goToURL('https://twitter.com/hashtag/${tag}?src=hash')">Twitter (hashtag)</button>
					<button onclick="goToURL('https://thingful.net/?what=sensor&z=16&thing=17e0s0cx&lat=${lat}&lng=${lon}')">ThingFul (IoT)</button>

				</div>
			</div>
			
				<div data-role="collapsible" data-collapsed="true">
				<h3>Extras:</h3>
				<div data-role="controlgroup">
			
			Make picture :
<input id="capture" type="file" accept="image/*" capture="camera" name="file" />
<img id="picture" src="" width="100%" alt="Capture first" />
				</div>
			</div>
			
		</div>
		<!-- /content -->

		<div data-role="footer" data-id="myFooter" data-position="fixed">
			Copyleft: GPL-3.0+ : http://notabug.org/tizen/mapo</div>
		<!-- /footer -->
	</div>
	<!-- /page #position-->


	<!-- Page 2 : Search a place -->
	<div data-role="page" id="map" class="ui-page">
		<div data-role="header" data-id="myHeader" data-position="fixed">
			<a href="javascript:void(0);" data-role="button"
				onclick="getLocation()" id="home" class="ui-btn-left"
				data-icon="home">Update</a>
			<h1 class="ui-title">MAPO</h1>
			<a data-role="button" id="exit" class="ui-btn-right"
				data-icon="delete" onclick="quit()">Exit</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#position">Position</a></li>
					<li><a href="#map" class="ui-btn-active ui-state-persist">Map</a></li>
					<li><a href="#settings">Settings</a></li>
					<li><a href="#about">About</a></li>
				</ul>
			</div>
			<!-- /navbar -->
		</div>
		<!-- /header -->

		<div data-role="content">
			<div id="myMap">
				<a data-icon="delete" onclick="quit()"> Wont work if not online,
					please connect to internet before restarting application Exit</a>
			</div>
		</div>
		<!-- /content -->

		<div data-role="footer" data-id="myFooter" data-position="fixed">
			Copyleft: GPL-3.0+ : http://notabug.org/tizen/mapo</div>
		<!-- /footer -->
	</div>
	<!-- /page #place-->


	<!-- Page 3 : Settings -->
	<div data-role="page" id="settings" class="ui-page">
		<div data-role="header" data-id="myHeader" data-position="fixed">
			<a href="javascript:void(0);" data-role="button"
				onclick="getLocation()" id="home" class="ui-btn-left"
				data-icon="home">Update</a>
			<h1 class="ui-title">MAPO</h1>
			<a data-role="button" id="exit" class="ui-btn-right"
				data-icon="delete" onclick="quit()">Exit</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#position">Position</a></li>
					<li><a href="#map">Map</a></li>
					<li><a href="#settings" class="ui-btn-active ui-state-persist">Settings</a></li>
					<li><a href="#about">About</a></li>
				</ul>
			</div>
			<!-- /navbar -->
		</div>
		<!-- /header -->

		<div data-role="content">
			<table width="100%">
				<tr>
					<td><label for="switchOnline">Connection:</label></td>
					<td><select name="switchOnline" id="switchOnline"
						data-role="slider" onchange="switchOnline()">
							<option value="offline" selected>Offline</option>
							<option value="online">Online</option>
					</select></td>
				</tr>
				<tr>
					<td><label for="switchEnergy">Energy saving:</label></td>
					<td><select name="switchEnergy" id="switchEnergy"
						data-role="slider">
							<option value="off">Off</option>
							<option value="on" selected>On</option>
					</select></td>
				</tr>
				<tr>
					<td><label for="switchDeveloper">Developer mode:</label></td>
					<td><select name="switchDeveloper" id="switchDeveloper"
						data-role="slider" onchange="switchDeveloper()">
							<option value="off" >Off</option>
							<option value="on" selected>On</option>
					</select></td>
				</tr>

				<tr>

					<td colspan="2"><label for="zoom">Zoom:</label> <input
						type="range" name="zoom" id="zoom" value="18" min="1" max="20"
						onchange="refresh()" /></td>
				</tr>

			</table>


			<div data-role="controlgroup">
				<button onclick="settingsLocation()">Location</button>
			</div>

			<div data-role="controlgroup">
				<button onclick="settings()">System</button>
			</div>

		</div>
		<!-- /content -->

		<div data-role="footer" data-id="myFooter" data-position="fixed">
			Copyleft: GPL-3.0+ : http://notabug.org/tizen/mapo</div>
		<!-- /footer -->
	</div>
	<!-- /page #options-->


	<!-- Page 3 : about -->
	<div data-role="page" id="about" class="ui-page">
		<div data-role="header" data-id="myHeader" data-position="fixed">
			<a href="javascript:void(0);" data-role="button"
				onclick="getLocation()" id="home" class="ui-btn-left"
				data-icon="home">Update</a>
			<h1 class="ui-title">MAPO</h1>
			<a data-role="button" id="exit" class="ui-btn-right"
				data-icon="delete" onclick="quit()">Exit</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#position">Position</a></li>
					<li><a href="#map">Map</a></li>
					<li><a href="#settings">Settings</a></li>
					<li><a href="#about" class="ui-btn-active ui-state-persist">About</a></li>
				</ul>
			</div>
			<!-- /navbar -->
		</div>
		<!-- /header -->
		<div>
			<h3>Mapo geoloc</h3>
			This application is Free Libre and Open Source Software (licenced under GPL-3.0+)</br>
			You're welcome to contribute and make it a community managed project.</br>
			Support can be provided, join tizen devolopers channels.
		</div>

		<div data-role="collapsible" data-collapsed="true" id="logView"
			style="visibility: hidden;">
			<h3>Developer Log:</h3>
			<div data-role="controlgroup">
				<div id="console"></div>
			</div>
		</div>
		
		<div data-role="collapsible" data-collapsed="true" id="recordView"
			style="visibility: hidden;">
			<h3>Record:</h3>
			<div data-role="controlgroup">
				<table width="100%">
					<tr>
						<td><label for="switchRecord">Record:</label></td>
						<td><select name="switchRecord" id="switchRecord"
							data-role="slider" onchange="record()">
								<option value="stop">Stop</option>
								<option value="start">Start</option>
						</select></td>
					</tr>
				</table>
				<label for="selectorTimeout">Sampling rate (seconds):</label> <input
					type="range" name="selectorTimeout" id="selectorTimeout" value="10"
					min="1" max="100" />
			</div>
		</div>
		
<center><img src="icon.png" /></center>


		<div>
			<h3>CREDITS / THANKS</h3>
			<ul>
				<li>Philippe Coval
				<li>Theo Gerin
				<li>Sebastien Bocahu
				<li>OpenLayers.org
				<li>maps.google.com
				<li>Tizen project
				<li>TizenExperts
				<li>BeMyApp
				<li>LinuxFoundation
				<li>Samsung OSG
				<li>Intel OTC
				<li>Eurogiciel Opensource Dept
			</ul>
		</div>

		<!-- /content -->

		<div data-role="footer" data-id="myFooter" data-position="fixed">
			Copyleft: GPL-3.0+ : http://notabug.org/tizen/mapo</div>
		<!-- /footer -->
	</div>


	<!-- /page #options-->

	<!-- cache version -->
	<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>

</body>
</html>
